<template>
  <div class="container">
    <div class="servive_info flex">
      <span class="pic">
        <img :src="orderinfo.userheadurl || '/static/imgs/system_user.png'" alt>
      </span>
      <div class="servive_details flex-item">
        <div class="name">{{orderinfo.name}}</div>
        <div class="words">手机号：{{orderinfo.phone}}</div>
        <div class="words">最近到店时间：{{orderinfo.arrivetime}}</div>
        <div class="words">门店：{{orderinfo.shopname}}</div>
      </div>
    </div>
    <div class="servive_list flex" v-if="orderinfo.userid != userid">
      <span class="flex-item tl">需服务人</span>
      <span class="flex-item tc">{{orderinfo.username}}</span>
      <span class="flex-item tr">填写！</span>
    </div>
    <div class="servive_text" v-if="orderinfo.userid == userid">
      <span class="servive_icon"></span>
      <textarea class="servive_textarea" placeholder="请填写服务记录" focus="true" v-model="content"/>
    </div>
    <button class="submit" @tap="postinfo" v-if="orderinfo.userid == userid">提交服务记录</button>
  </div>
</template>

<script>
import api from '@/utils/api'
import wx from 'wx'
import Toast from '@/utils/toast'
import moment from 'moment'
import { setTimeout } from 'timers';
export default {
  data () {
    return {
      yejiid: 0,
      orderinfo: '',
      content: '',
      userid: 0
    }
  },
  async onShow () {
    this.userid = wx.getStorageSync('userInfo').user_id
    this.content = ''
    await Promise.all([
      this.getosyinfo()
    ])
  },
  onLoad (option) {
    if (option) {
      this.yejiid = option.yejiid
    }
  },
  computed: {
  },
  methods: {
    async getosyinfo () {
      const res = await api.getosyinfo({ yejiid: this.yejiid });
      console.log(res)
      if (res) {
        if (res.code === '100') {
          this.orderinfo = res.data[0];
          this.orderinfo.arrivetime = moment.unix(this.orderinfo.arrivetime).format('YYYY-MM-DD hh:mm');
        } else {
          Toast(res.msg);
        }
      }
    },
    async postinfo () {
      const ret = await api.postjiluhuifang({ userid: this.userid, guestid: this.orderinfo.guestid, osyid: this.yejiid, orderid: this.orderinfo.orderid, type: 1, content: this.content });
      if (ret) {
        if (ret.code === '100') {
          Toast(ret.msg, 'noicon');
          setTimeout(() => { wx.navigateBack() }, 500)
        } else {
          Toast(ret.msg);
        }
      }
    }
  }
}
</script>

<style scoped>
.servive_info {
  width: 100%;
  padding: 34rpx 32rpx;
  background: #fff;
  border-bottom: 2rpx solid rgba(153, 153, 153, 0.2);
}
.servive_info .pic {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 40rpx;
}
.servive_info .pic img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
}
.servive_details .name {
  font-size: 32rpx;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  line-height: 42rpx;
}
.servive_details .words {
  font-size: 28rpx;
  font-weight: 400;
  line-height: 46rpx;
  color: rgba(102, 102, 102, 1);
}
.servive_list {
  width: 100%;
  height: 94rpx;
  padding: 0 32rpx;
  line-height: 94rpx;
  background: #fff;
  font-size: 28rpx;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
}
.servive_text {
  width: 100%;
  height: 370rpx;
  padding: 24rpx 0;
  padding-left: 72rpx;
  margin-top: 14rpx;
  background: #fff;
  position: relative;
}
.servive_text .servive_textarea {
  width: 100%;
  height: 100%;
  font-size: 28rpx;
  font-weight: 400;
  line-height: 38rpx;
  color: rgba(102, 102, 102, 1);
}
.servive_text .servive_icon {
  position: absolute;
  top: 28rpx;
  left: 32rpx;
  width: 24rpx;
  height: 24rpx;
  background: url(http://mytimg.178mr.com/write@2x.png) no-repeat;
  background-size: 100%;
}
.submit {
  display: block;
  width: 300rpx;
  height: 100rpx;
  margin: 0 auto;
  margin-top: 100rpx;
  border-radius: 52rpx;
  text-align: center;
  line-height: 100rpx;
  background: #ff4444;
  color: #fff;
  font-size: 36rpx;
}
</style>
